import React, { useState, useRef } from 'react';
import { View, Text, ScrollView, Image, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { AppStyles, AppColors, TextStyles } from '../theme/uiLib.config';
import Icon from 'react-native-vector-icons/Ionicons';
import mockMerchants from '../data/mockMerchants';

const { width: screenWidth } = Dimensions.get('window');

const MerchantDetail = () => {
  const router = useRouter();
  const { id } = useLocalSearchParams();
  const merchant = mockMerchants.find(m => m.id === id);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const scrollViewRef = useRef(null);

  if (!merchant) {
    return (
      <View style={styles.container}>
        <Text>商户不存在</Text>
      </View>
    );
  }

  const handleScroll = (event) => {
    const contentOffset = event.nativeEvent.contentOffset.x;
    const index = Math.round(contentOffset / screenWidth);
    setCurrentImageIndex(index);
  };

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView}>
        {/* 商户基本信息 */}
        <View style={styles.imageContainer}>
          <ScrollView
            ref={scrollViewRef}
            horizontal
            pagingEnabled
            showsHorizontalScrollIndicator={false}
            onMomentumScrollEnd={handleScroll}
          >
            {merchant.gallery.map((image, index) => (
              <Image
                key={index}
                source={image}
                style={styles.merchantImage}
              />
            ))}
          </ScrollView>

          {/* 返回按钮 */}
          <TouchableOpacity 
            style={styles.backButton}
            onPress={() => router.back()}
          >
            <Icon name="chevron-back" size={28} color={AppColors.white} />
          </TouchableOpacity>

          {/* 轮播指示器 */}
          {merchant.gallery.length > 1 && (
            <View style={styles.paginationContainer}>
              {merchant.gallery.map((_, index) => (
                <View
                  key={index}
                  style={[
                    styles.paginationDot,
                    currentImageIndex === index && styles.paginationDotActive
                  ]}
                />
              ))}
            </View>
          )}
        </View>

        <View style={styles.infoContainer}>
          <Text style={styles.merchantName}>{merchant.name}</Text>
          <View style={styles.ratioContainer}>
            <Text style={styles.ratioLabel}>兑换比例</Text>
            <Text style={styles.ratioValue}>{merchant.ratio}</Text>
          </View>
          <View style={styles.locationContainer}>
            <Icon name="location-sharp" size={16} color={AppColors.secondary} />
            <Text style={styles.locationText}>{merchant.location}</Text>
          </View>
        </View>

        {/* 商户详细信息 */}
        <View style={styles.detailContainer}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>商户介绍</Text>
          </View>
          <Text style={styles.description}>{merchant.description}</Text>

          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>营业时间</Text>
          </View>
          <Text style={styles.infoText}>{merchant.openingHours}</Text>

          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>联系电话</Text>
          </View>
          <Text style={styles.infoText}>{merchant.phoneNumber}</Text>

          {/* 优惠活动 */}
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>优惠活动</Text>
          </View>
          {merchant.promotions.map((promotion, index) => (
            <View key={index} style={styles.promotionItem}>
              <Icon name="gift-outline" size={16} color={AppColors.primary} />
              <Text style={styles.promotionText}>{promotion}</Text>
            </View>
          ))}

          {/* 推荐商品 */}
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>推荐商品</Text>
          </View>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.recommendedItems}>
            {merchant.redeemableItems.map((item, index) => (
              <View key={index} style={styles.recommendedItem}>
                <Image source={item.image} style={styles.recommendedItemImage} />
                <Text style={styles.recommendedItemName}>{item.name}</Text>
                <Text style={styles.recommendedItemPoints}>{item.points}积分</Text>
              </View>
            ))}
          </ScrollView>
        </View>
      </ScrollView>

      {/* 底部按钮 */}
      <View style={styles.footer}>
        <TouchableOpacity 
          style={styles.joinButton}
          onPress={() => {
            // 处理加入会员逻辑
          }}
        >
          <Text style={styles.joinButtonText}>加入会员</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.background,
  },
  scrollView: {
    flex: 1,
  },
  imageContainer: {
    position: 'relative',
    height: screenWidth * 0.6,
  },
  merchantImage: {
    width: screenWidth,
    height: screenWidth * 0.6,
    resizeMode: 'cover',
  },
  backButton: {
    position: 'absolute',
    top: 44,
    left: 16,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1,
  },
  infoContainer: {
    padding: 16,
    backgroundColor: AppColors.white,
  },
  merchantName: {
    ...TextStyles.h1,
    marginBottom: 8,
  },
  ratioContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  ratioLabel: {
    ...TextStyles.small,
    color: AppColors.secondary,
    marginRight: 8,
  },
  ratioValue: {
    ...TextStyles.h3,
    color: AppColors.golden,
  },
  locationContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  locationText: {
    ...TextStyles.small,
    color: AppColors.secondary,
    marginLeft: 4,
  },
  detailContainer: {
    marginTop: 8,
    padding: 16,
    backgroundColor: AppColors.white,
  },
  sectionHeader: {
    marginTop: 16,
    marginBottom: 8,
  },
  sectionTitle: {
    ...TextStyles.h3,
    color: AppColors.tertiary,
  },
  description: {
    ...TextStyles.small,
    color: AppColors.secondary,
    lineHeight: 20,
  },
  infoText: {
    ...TextStyles.small,
    color: AppColors.secondary,
  },
  promotionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  promotionText: {
    ...TextStyles.small,
    color: AppColors.secondary,
    marginLeft: 8,
  },
  recommendedItems: {
    marginTop: 8,
  },
  recommendedItem: {
    marginRight: 16,
    width: 120,
  },
  recommendedItemImage: {
    width: 120,
    height: 120,
    borderRadius: 8,
  },
  recommendedItemName: {
    ...TextStyles.small,
    marginTop: 4,
  },
  recommendedItemPoints: {
    ...TextStyles.small,
    color: AppColors.golden,
    marginTop: 2,
  },
  footer: {
    padding: 24,
    backgroundColor: AppColors.white,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: AppColors.grey10,
  },
  joinButton: {
    backgroundColor: AppColors.blueplus,
    borderRadius: 24,
    height: 48,
    alignItems: 'center',
    justifyContent: 'center',
  },
  joinButtonText: {
    ...TextStyles.h3,
    color: AppColors.golden,
  },
  paginationContainer: {
    position: 'absolute',
    bottom: 16,
    flexDirection: 'row',
    alignSelf: 'center',
    zIndex: 1,
  },
  paginationDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    marginHorizontal: 4,
  },
  paginationDotActive: {
    backgroundColor: AppColors.white,
  },
});

export default MerchantDetail;